iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
自我挑戰組

React 學習之路系列 第 10

列表與 Key ( Day 10 )

  • 分享至 

  • xImage
  •  

如果有使用過其他框架的經驗,可能會需要熟悉一下React 的寫法,是由 JSX 搭配迴圈去產生。以下羅列一些需要注意的地方:

  • 常見使用 map、filter 、reduce 等處理陣列法語處理列表
  • 注意列表需要綁上一個 key 值,作為 React 在更新 React DOM tree 時的辨識,而 key 必須是唯一
  • key 的綁定必須在陣列處理時被綁定 (下面提供反例)

1. 2. 一個簡單的範例

資料如果有類似 id 的 key 最好,不然可考慮使用物件本身綁定。

const lists = [{
        id: 1,
        name: 'Apple'
    }, {
        id: 2,
        name: 'Banana'
    },
    {
        id: 3,
        name: 'Berry'
    }
]


function Vender(props) {
    const lists = props.lists;
    const listItems = lists.map((list) =>
        <li key = {list.id}>
          { list.name }
        </li>
    );
    return (
      <ul>
          { listItems }
      </ul>
    );
}

ReactDOM.render( <Vender lists = {lists}/>,
document.getElementById('root'));

另附上 Codepen

應該避免的錯誤(3. key 的綁定必須在陣列處理時被綁定)

const fruits = [
  {
    name: 'tomato',
    color: 'red',
    id: '#aaa'
  },
  //資料略
]

function ListItem(props) {
  // 在元件內才綁定,而非在處理陣列時
  return <li key={props.id}>{props.value}</li>;
}

function FruitsList(props) {
  const fruits = props.fruits;
  return (
    <ul>
      {fruits.map((fruit) =>
        //正確寫法 <ListItem id={fruit.id} value={fruit.name} />
        <ListItem id={fruit.id} value={fruit.name} />
      )}
    </ul>
  );
}

ReactDOM.render(
  <FruitsList fruits={fruits} />,
  document.getElementById('root')
);

參考資料:
https://zh-hant.reactjs.org/docs/lists-and-keys.html


上一篇
條件 Render ( Day 9 )
下一篇
表單 Controlled Component VS Uncontrolled Component ( Day 11 )
系列文
React 學習之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言